<script setup lang="ts">
import VueEcharts from 'vue-echarts'
import { useChartToolboxDataView } from '@/mixins/MixinChartToolboxDataView'
import type { DataTotalOrDetailsResult } from '../composable'
import { useChartAutoResize } from '@/mixins/MixinChartAutoResize'
import type { VChartInstance } from '@/types'

const props = defineProps<{
  data: DataTotalOrDetailsResult
}>()

const chartRef = ref<VChartInstance>()

const unit = computed(() => {
  return props.data.unit || ''
})
const { dataView } = useChartToolboxDataView({
  dataViewFirstCellName: '设备',
  optionToContent(opt, g) {
    const dataset = opt.dataset[0]?.source || []
    return g(dataset)
  },
})
const designStore = useDesignStore()
const option = computed(() => {
  return {
    title: {
      text: '排放量明细',
      left: 15,
      top: 15,
      textStyle: {
        fontSize: 16,
      },
    },
    legend: {
      left: 'center',
      top: 40,
      type: 'scroll',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
      appendToBody: true,
    },
    grid: {
      left: 40,
      right: 40,
      top: 90,
      bottom: 30,
      containLabel: true,
    },
    xAxis: { type: 'category' },
    yAxis: { type: 'value', name: unit.value, nameTextStyle: { align: 'left' } },
    series: [
      ...Array(props.data.tagDataVoList?.length).fill({
        type: 'line',
        emphasis: {
          focus: 'series',
        },
      }),
    ],
    toolbox: {
      top: 20,
      right: 30,
      feature: {
        magicType: {
          type: ['line', 'bar', 'stack'],
        },
        dataView: dataView.value,
      },
    },
    dataset: {
      source: [
        ['名称', ...(props.data.tagDataVoList || []).map(item => item.name)],
        ...(props.data.rowData || []).map((key) => {
          return [key, ...(props.data.tagDataVoList || []).map(item => item.nowData[key])]
        }),
      ],
    },
  }
})

useChartAutoResize(chartRef)
</script>

<template>
  <VueEcharts
    ref="chartRef"
    :option="option" :init-options="{
      locale: 'zh',
    }" :theme="designStore.theme"
  />
</template>
